import { defineStore } from 'pinia';
import { IThemeColor } from '../type/index';

export const useThemeStore = defineStore({
  id: 'themeStore',
  state: () => ({
    isColseMenu: false,
    isDarkTheme: false,
    currentThemeColor: {} as IThemeColor,
    whiteThemeColor: {
      font: '#111111',
      border: '#4449a1',
      lighter: '#ffffff',
      main: '#f6f8fb',
      active: '#6d9be0',
      stripe: '#fafafa',
      success: '#67c23a',
      warning: '#e6a23c',
      danger: '#f56c6c',
    },
    darkThemeColor: {
      font: '#f5f5f5',
      border: '#f5f5f5',
      lighter: '#272d31',
      main: '#262a31',
      active: '#4449a1',
      stripe: '#2d3542',
      success: '#67c23a',
      warning: '#e6a23c',
      danger: '#f56c6c',
    },
  }),
  actions: {
    changeColseMenu() {
      this.isColseMenu = !this.isColseMenu;
    },
    saveThemeToLocal() {
      const isDarkTheme = localStorage.getItem('darkTheme');

      if (isDarkTheme == null) this.isDarkTheme = false;
      else this.isDarkTheme = isDarkTheme === 'true' ? false : true;

      localStorage.setItem('darkTheme', String(this.isDarkTheme));
    },
    changeThemeColor() {
      const body = document.documentElement as HTMLElement;
      let flag;

      const isDarkTheme = localStorage.getItem('darkTheme');

      //当localStorage中为空或是黑主题时,改变为白主题
      if (isDarkTheme == null || isDarkTheme == 'true') {
        flag = false;
        this.currentThemeColor = this.whiteThemeColor;
      } else {
        flag = true;
        this.currentThemeColor = this.darkThemeColor;
      }

      body.setAttribute('dark-theme', String(flag));
    },

    clearStore() {
      this.isColseMenu = false;
      this.isDarkTheme = false;
      this.currentThemeColor = {} as IThemeColor;
    },
  },
});
